<template>
  <el-dialog :visible.sync="isShow" v-if="isShow" title="FB设置" width="50%" :before-close="handleClose" top="150px" :close-on-click-modal="false">
    <div class="border-box">
      <el-form ref="ruleForm" :model="formParams" :rules="ruleForm" label-position="right" label-width="0">
        <div class="flex item-box" v-for="(item,index) in itemData" :key="index">
          <div class="title width25">
            {{ item.label }}<span :class="item.pass?'mustPass':'noMustPass'">*</span>
          </div>
          <div class="content width80">
            <el-form-item class="item-clear" v-show="item.key=='agent_id'" label="" prop="agent_id">
              <el-select v-model="formParams.agent_id" placeholder="请选择渠道" filterable disabled>
                <el-option :label="'【'+item.value+'】'+item.label" :value="item.value" v-for="(item, index) in channelData" :key="index"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item class="item-clear" v-show="item.key=='main_agent_name'" label="" prop="fb_token">
              <span>【{{formParams.main_agent_id}}】{{formParams.main_agent_name}}</span>
            </el-form-item>
            <el-form-item class="item-clear" v-show="item.key=='appsflyer'" label="" prop="appsflyer">
              <el-radio-group v-model="formParams.appsflyer">
                <el-radio-button :label="true">是</el-radio-button>
                <el-radio-button :label="false">否</el-radio-button>
              </el-radio-group>
            </el-form-item>
            <el-form-item class="item-clear" v-show="item.key=='app_id'" label="" prop="app_id">
              <el-input class="width40" type="text" v-model="formParams.app_id" clearable placeholder="请输入app_id"></el-input>
            </el-form-item>
            <el-form-item class="item-clear" v-show="item.key=='dev_key'" label="" prop="dev_key">
              <el-input class="width40" type="text" v-model="formParams.dev_key" clearable placeholder="请输入dev_key"></el-input>
            </el-form-item>
            <el-form-item class="item-clear" v-show="item.key=='fb_id'" label="" prop="fb_id">
              <el-input class="width40" type="text" v-model="formParams.fb_id" clearable placeholder="请输入FB_id"></el-input>
            </el-form-item>
            <el-form-item class="item-clear" v-show="item.key=='fb_token'" label="" prop="fb_token">
              <el-input type="text" v-model="formParams.fb_token" clearable placeholder="请输入FB_token"></el-input>
            </el-form-item>
            <el-form-item class="item-clear" v-show="item.key=='is_fb'" label="" prop="is_fb">
              <el-radio-group v-model="formParams.is_fb">
                <el-radio-button :label="1">是</el-radio-button>
                <el-radio-button :label="0">否</el-radio-button>
              </el-radio-group>
            </el-form-item>
            <el-form-item class="item-clear" v-show="item.key=='share_url'" label="" prop="fb_token">
              <span>{{formParams.share_url}}</span>
            </el-form-item>
          </div>
        </div>
      </el-form>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button size="medium" @click="handleClose">取 消</el-button>
      <el-button size="medium" type="primary" @click="handleConfirm('ruleForm')">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import {
  editFB
} from '@/api/system'

export default {
  props: {
    show: {
      type: Boolean,
      default: false
    },
    data: {
      type: Object,
      default: function () {
        return {}
      }
    },
  },
  data () {
    return {
      isShow: false,
      itemData:[
        { label: '渠道', key: 'agent_id',pass:true },
        { label: 'appsflyer', key: 'appsflyer',pass:true },
        { label: 'app_id', key: 'app_id'},
        { label: 'dev_key', key: 'dev_key'},
        { label: 'FB_id', key: 'fb_id',pass:true },
        { label: 'FB_token', key: 'fb_token',pass:true },
        { label: '是否是FB', key: 'is_fb' },
      ],
      channelData: this.$store.state.commonState.channelDataArray,
      formParams: {
        agent_id: '',
        fb_id: '',
        fb_token: '',
        appsflyer:true,
        app_id: '',
        dev_key: '',
        is_fb:0,
      },
      ruleForm: {
        agent_id: [{ required: true, trigger: 'blur', message: '请选择渠道', }],
        appsflyer: [{ required: true, trigger: 'blur', message: '请输入appsflyer', }],
        fb_id: [{ required: true, trigger: 'blur', message: '请输入FB_id', }],
        fb_token: [{ required: true, trigger: 'blur', message: '请输入FB_token', }],
      },
    }
  },
  computed: {},
  activated(){
    this.channelData=this.$store.state.commonState.channelDataArray
  },
  watch: {
    show: function () {
      let that = this;
      that.isShow = that.show
      if (that.data) {
        that.formParams = JSON.parse(JSON.stringify(that.data))
        that.itemData=[
          { label: '渠道', key: 'agent_id',pass:true },
          { label: '主渠道', key: 'main_agent_name',},
          { label: 'appsflyer', key: 'appsflyer',pass:true },
          { label: 'app_id', key: 'app_id'},
          { label: 'dev_key', key: 'dev_key'},
          { label: 'FB_id', key: 'fb_id',pass:true },
          { label: 'FB_token', key: 'fb_token',pass:true },
          { label: '是否是FB', key: 'is_fb' },
          { label: '分享链接', key: 'share_url' },
        ]
      } else {
        that.formParams = {
          agent_id: '',
          fb_id: '',
          fb_token: '',
          appsflyer:true,
          app_id: '',
          dev_key: '',
          is_fb:0,
        }
      }
    },
  },
  mounted () {},
  methods: {
    // 确认
    handleConfirm (formvalue) {
      let that = this, params = JSON.parse(JSON.stringify(that.formParams));
      that.$refs[formvalue].validate((valid) => {
        if (valid) {
          // // 新增
          // if (!params.id) {
          //   addUser(params).then(function (res) {
          //     that.$message.success(res.msg)
          //     that.$emit('onHideDetails', true)
          //   }).catch((error) => {
          //     that.$message.error(error.msg)
          //   })
          // } else {
            editFB(params).then(function (res) {
              that.$message.success(res.msg)
              that.$emit('onHideDetails', true)
            }).catch((error) => {
              that.$message.error(error.msg)
            })
          // }
        } else {
          return false;
        }
      });
    },
    // 取消
    handleClose () {
      this.$emit('onHideDetails', false)
    },
  }
}
</script>

<style scoped lang="scss">
.encryption {
  height: 10px;
  line-height: 10px;
  margin-bottom: -10px;
  font-size: 12px;
  color: darkred;
}
</style>
